<template>
  <!-- 1.5 锁具管理 -->
  <!-- 智能锁控下钻页面 -->
  <div class="lock-control-page betweenbox">
    <!-- <div class="left">
      <div class="left-title">锁具管理</div>
      <div class="left-contain">
        <LocksMenu />
      </div>
    </div>-->
    <div class="right">
      <!-- 标题 -->
      <div class="right-top betweenbox">
        <div class="right-top-name centerbox">{{titleName}}</div>
        <div class="right-top-back" @click="goBack"></div>
      </div>
      <!-- 内容 -->
      <div class="right-contain">
        <div class="right-contain-one">
          <div>
            <UserPermissions />
          </div>
          <div class="tasks">
            <UserTasks />
          </div>
        </div>
        <div class="right-contain-two">
          <div>
            <TestingInformation :datas="testInfoData" :onlinedatas="onlinedatas" />
          </div>
          <div>
            <!-- 装置状态 -->
            <DeviceStatus :title="titleStatus" :datas="statusData" />
          </div>
          <div>
            <!-- 提示信息 -->
            <DeviceStatus :title="titleInfo" :datas="infoData" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import LocksMenu from "../../components/LocksMenu/index.vue";
import UserPermissions from "./components/UserPermissions.vue";
import UserTasks from "./components/UserTasks.vue";
import TestingInformation from "./components/TestingInformation.vue";
import DeviceStatus from "./components/DeviceStatus.vue";
import { LocksAPIModule } from "@/store/modules/locks";
@Component({
  components: {
    LocksMenu,
    UserPermissions,
    UserTasks,
    TestingInformation,
    DeviceStatus,
  },
})
export default class extends Vue {
  titleStatus: string = "装置状态";
  titleInfo: string = "提示信息";
  // 检测信息
  testInfoData: any[] = [
    // {
    //   name: "钥匙座0电子钥匙电量百分比",
    //   val: "60",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "钥匙座1电子钥匙电量百分比",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
  ];
  onlinedatas: any = {
    name: "在线数量",
    val: "0",
    bdzmc: "110kV商西变电站",
    bdzid: "6011",
  };
  // 装置状态
  statusData: any[] = [
    {
      name: "1号电子钥匙充电故障",
      val: "1",
      bdzmc: "110kV商西变电站",
      bdzid: "6011",
    },
    // {
    //   name: "1号电子钥匙通信故障",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "2号电子钥匙充电故障",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "2号电子钥匙通信故障",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "交流电源输入异常",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "内存存储异常告警",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "装置异常报警",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
  ];
  // 提示信息
  infoData: any[] = [
    {
      name: "1号电子钥匙初始化",
      val: "1",
      bdzmc: "110kV商西变电站",
      bdzid: "6011",
    },
    // {
    //   name: "1号电子钥匙发送工作任务状态结果",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "1号电子钥匙接收工作任务状态",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "2号电子钥匙初始化",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "2号电子钥匙发送工作任务状态结果",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "2号电子钥匙接收工作任务状态",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "操作人员登录认证状态",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "锁控控制器接收工作任务状态",
    //   val: "0",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
    // {
    //   name: "锁控控制器连接状态",
    //   val: "1",
    //   bdzmc: "110kV商西变电站",
    //   bdzid: "6011",
    // },
  ];
  inters = null;

  get titleName() {
    return LocksAPIModule.oneStationList.name;
  }
  get stationId() {
    return LocksAPIModule.stationId;
  }
  @Watch("stationId")
  public aaaa() {
    this.getJcxxData();
    this.getBjxxData();
    this.getTsxxData();
  }

  mounted() {
    var _this = this;
    this.clearInterval();
    _this.inters = setInterval(function () {
      _this.getJcxxData();
      _this.getBjxxData();
      _this.getTsxxData();
    }, 1000 * 5);
  }

  // 清除定时器
  clearInterval() {
    if (this.inters) {
      window.clearInterval(this.inters);
      this.inters = null;
    }
  }
  // 获取监测信息
  getJcxxData() {
    var params = {
      stationId: this.stationId,
    };
    (this as any).$services
      .getJcxxData({ data: params })
      .then((result: any) => {
        if (result.data) {
          var data = [];
          result.data.map((k, j) => {
            if (k.name === "在线数量") {
              this.onlinedatas = k;
            } else {
              var value = Number(k.val);
              if (value < 10 && value > 0) {
                k["valueProgress"] = 1;
              } else if (value < 100 && value > 90) {
                k["valueProgress"] = 9;
              } else {
                k["valueProgress"] = Math.round(Number(value / 10));
              }
              data.push(k);
            }
          });
          // console.log("data:", data);
          this.testInfoData = data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 获取报警信息
  getBjxxData() {
    var params = {
      stationId: this.stationId,
    };
    (this as any).$services
      .getBjxxData({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.statusData = result.data;
        }
        // this.barData = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 获取提示信息
  getTsxxData() {
    var params = {
      stationId: this.stationId,
    };
    (this as any).$services
      .getTsxxData({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.infoData = result.data;
        }
        // this.barData = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  public goBack(val: string) {
    this.$router.push("index");
  }
  destroyed() {
  this.clearInterval()
  }
}
</script>
<style lang="scss" scoped>
.lock-control-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  color: #fff;
  .right {
    width: 100%;
    height: 100%;
    .right-top {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      &-name {
        width: 71.2%;
        font-size: 0.2rem;
        font-weight: 400;
        color: #76eefa;
      }
      &-back {
        width: 0.9rem;
        height: 0.3rem;
        background: url("../../../../assets/img/return.png") no-repeat center
          center;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    .right-contain {
      width: 100%;
      height: calc(100% - 0.4rem);
      display: flex;
      &-one {
        width: 10.98rem;
        height: 100%;
        margin: 0 0.2rem;
        > :nth-child(1) {
          width: 100%;
          height: 44%;
        }
        > :nth-child(2) {
          width: 100%;
          height: 54%;
        }
        .tasks {
          margin-top: 1.5%;
        }
      }
      &-two {
        width: 4.32rem;
        height: 100%;
        > div {
          height: 32%;
          width: 100%;
        }
        > :nth-child(2),
        > :nth-child(3) {
          margin-top: 0.15rem;
        }
      }
    }
  }
}
</style>






